<template>
  <div id="app">
    <!--material-design-icons-->
    <link href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css" rel="stylesheet"/>

    <main>
      <router-view/>
    </main>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
  @import './common/font.css';
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
  }
  html, body, #app{
    height: 100%;  /* vue实例挂载在body上，body自适应，直接在app中设置height不生效*/
  }
  main {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-image: url("./assets/images/morning.jpg");
    background-color: rgb(171, 231, 241);
    background-position: left top;
    background-size: cover;
    background-repeat: no-repeat;
  }
  @media screen and (min-width: 450px){
    main {
      width: 380px;
    }
  }
</style>
